<!DOCTYPE html>
<head th:replace="~{fragments/general.html :: head}"/>
<body>
<header th:replace="~{fragments/general.html :: header}"/>
<div class="container mt-3">
    <p>Операции по стратегиям</p>
    <table id="orders-table" class="table table-bordered table-striped table-sm small">
        <thead>
        <tr>
            <th>№</th>
            <th>Instrument</th>
            <th>Strategy</th>
            <th>Buy time</th>
            <th>Buy price</th>
            <th>Lots</th>
            <th>Sell price</th>
            <th>Sell time</th>
            <th>Commission</th>
            <th>Profit</th>
        </tr>
        </thead>
        <tbody id="orders-table-body">
        <tr th:each="o: ${orders}">
            <td th:text="${o.id}"/>
            <td th:text="${o.figiTitle}"/>
            <td th:text="${o.strategy}"/>
            <td th:text="${#temporals.formatISO(o.purchaseDateTime)}"/>
            <td th:text="${#numbers.formatDecimal(o.purchasePrice, 1, 4, 'DEFAULT')}"
                data-toggle="tooltip" data-placement="top" th:title="${o.details?.currentPrices}"/>
            <td th:text="${o.lots}"/>
            <td th:text="${o.sellPrice == null ? null : #numbers.formatDecimal(o.sellPrice, 1, 4, 'DEFAULT')}"
                data-toggle="tooltip" data-placement="top" th:title="${o.details?.sellPrices}"/>
            <td th:text="${#temporals.formatISO(o.sellDateTime)}"/>
            <td th:text="${#numbers.formatDecimal(o.purchaseCommission.add(o.sellCommission == null ? 0 : o.sellCommission), 1, 2, 'DEFAULT')}"/>
            <td>
                <span th:text="${#numbers.formatDecimal(o.sellPrice.subtract(o.purchasePrice).multiply(o.lots).subtract(o.purchaseCommission).subtract(o.sellCommission), 1, 2, 'DEFAULT')}"
                      th:if="${o.sellPrice != null && o.purchaseCommission != null && o.sellCommission != null}"/>
            </td>
        </tr>
        </tbody>
    </table>
    <script>
        // Support filtering and pages
        $(document).ready(function () {
            new DataTable('#orders-table', {
                pageLength: 100,
                lengthChange: false,
                info: false,
                order: [
                    [0, "desc"]
                ]
            });
        });

        // Apply timezone to dates
        $('#orders-table-body td:nth-child(4), #orders-table td:nth-child(8)').each(function() {
            var dateString = $(this).text();
            if(dateString) {
                var date = new Date(dateString);
                $(this).text(date.toLocaleString([], {dateStyle: "short", timeStyle: 'short'}));
            }
        });
    </script>
</div>
</body>
</html>
